/*
 * @Author: Await
 * @Date: 2025-04-18 09:50:30
 * @LastEditors: Await
 * @LastEditTime: 2025-04-22 15:22:35
 * @Description: 标题配置组件
 */

import React, { useState, useCallback } from 'react';
import { useTitleConfig } from '../../../hooks/useTitleConfig';
import { useLocalStorage } from '../../../hooks/useLocalStorage';
import {
    Form,
    Switch,
    Input,
    Select,
    Divider,
    Row,
    Col,
    Typography,
    InputNumber,
    Space,
    Collapse,
    Tabs,
    Button,
    Tooltip,
    Popover,
    Modal,
    message
} from 'antd';
import { TitleConfig as TitleConfigType } from '../../../types/index';
import {
    QuestionCircleOutlined,
    SaveOutlined,
    DeleteOutlined,
    LinkOutlined,
    InfoCircleOutlined,
    PlusOutlined,
    ImportOutlined,
    ExportOutlined
} from '@ant-design/icons';
import type { TabsProps, CollapseProps } from 'antd';
import PaddingControl from '../../Common/PaddingControl';
import ColorPicker from '../../Common/ColorPicker';
import { useTitlePresets } from '../../../hooks/useTitlePresets';

interface TitleConfigProps {
    title: TitleConfigType;
    onChange: (title: TitleConfigType) => void;
}

/**
 * 标题配置组件
 */
const TitleConfig: React.FC<TitleConfigProps> = ({
    title,
    onChange
}) => {
    // 状态管理
    const [activeTab, setActiveTab] = useState('1');
    const [showPresetModal, setShowPresetModal] = useState(false);
    const [presetName, setPresetName] = useState('');
    const [lastAppliedPreset, setLastAppliedPreset] = useLocalStorage<string>('last-applied-title-preset', '');

    // 使用自定义钩子来管理标题配置
    const {
        handleChange,
        handleTextStyleChange,
        handleSubtextStyleChange,
        handlePositionChange,
        debouncedTextStyleChange,
        debouncedSubtextStyleChange,
        debouncedPositionChange,
        debouncedHandleChange,
        handlePaddingChange,
        handleShadowColorChange,
        handleShadowAlphaChange,
        shadowHexColor,
        shadowAlpha
    } = useTitleConfig(title, onChange);

    // 使用标题预设钩子
    const { allPresets, saveAsPreset, deletePreset } = useTitlePresets();

    // 应用预设
    const applyPreset = useCallback((presetConfig: TitleConfigType) => {
        onChange(presetConfig);
    }, [onChange]);

    // 保存当前配置为预设
    const handleSavePreset = useCallback(() => {
        if (!presetName.trim()) {
            message.error('请输入预设名称');
            return;
        }

        if (saveAsPreset(presetName, title)) {
            setShowPresetModal(false);
            setPresetName('');
            setLastAppliedPreset(presetName);
        }
    }, [presetName, title, saveAsPreset, setLastAppliedPreset]);

    // 预设面板内容
    const presetsContent = (
        <div style={{ width: 300, maxHeight: 400, overflow: 'auto' }}>
            <Typography.Title level={5}>应用预设样式</Typography.Title>
            <Row gutter={[8, 8]}>
                {allPresets.map((preset) => (
                    <Col span={12} key={preset.name}>
                        <div
                            style={{
                                border: '1px solid #d9d9d9',
                                borderRadius: 4,
                                padding: 8,
                                cursor: 'pointer',
                                backgroundColor: lastAppliedPreset === preset.name ? '#e6f7ff' : 'transparent',
                                position: 'relative'
                            }}
                            onClick={() => {
                                applyPreset(preset.config);
                                setLastAppliedPreset(preset.name);
                                message.success(`已应用"${preset.name}"预设`);
                            }}
                        >
                            <Typography.Text strong ellipsis style={{ display: 'block' }}>
                                {preset.name}
                            </Typography.Text>
                            {/* 预设示例 - 模拟预览 */}
                            <div style={{
                                height: 40,
                                backgroundColor: preset.config.backgroundColor || 'transparent',
                                borderRadius: typeof preset.config.borderRadius === 'number' ? `${preset.config.borderRadius}px` : '0px',
                                border: preset.config.borderWidth ? `${preset.config.borderWidth}px solid ${preset.config.borderColor || '#000'}` : 'none',
                                padding: '4px 8px',
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'center',
                                alignItems: preset.config.textAlign === 'center' ? 'center' :
                                    preset.config.textAlign === 'right' ? 'flex-end' : 'flex-start',
                                marginTop: 4
                            }}>
                                <div style={{
                                    color: preset.config.textStyle?.color || '#333',
                                    fontSize: Math.min(14, (preset.config.textStyle?.fontSize || 14) / 1.5),
                                    fontWeight: preset.config.textStyle?.fontWeight || 'normal'
                                }}>
                                    {preset.config.text || '标题示例'}
                                </div>
                                {preset.config.subtext && (
                                    <div style={{
                                        color: preset.config.subtextStyle?.color || '#999',
                                        fontSize: Math.min(12, (preset.config.subtextStyle?.fontSize || 12) / 1.5)
                                    }}>
                                        {preset.config.subtext}
                                    </div>
                                )}
                            </div>

                            {/* 删除按钮 - 仅显示在自定义预设上 */}
                            {!preset.isDefault && (
                                <Button
                                    type="text"
                                    size="small"
                                    icon={<DeleteOutlined />}
                                    style={{ position: 'absolute', top: 2, right: 2 }}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        deletePreset(preset.name);
                                    }}
                                />
                            )}
                        </div>
                    </Col>
                ))}
            </Row>
            <Divider style={{ margin: '12px 0' }} />
            <Button
                type="primary"
                icon={<SaveOutlined />}
                block
                onClick={() => setShowPresetModal(true)}
            >
                保存当前样式为预设
            </Button>
        </div>
    );



    // 定义主标题样式折叠面板项
    const mainTitleStylePanel = (
        <div>
            <Row gutter={16}>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            文字颜色
                        </Typography.Text>
                        <ColorPicker
                            value={title.textStyle?.color || '#333333'}
                            onChange={(color) => debouncedTextStyleChange('color', color)}
                            showAlpha={true}
                        />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            字号
                        </Typography.Text>
                        <InputNumber
                            size="small"
                            value={title.textStyle?.fontSize || 18}
                            onChange={(value) => handleTextStyleChange('fontSize', value)}
                            addonAfter="px"
                            style={{ width: '100%' }}
                        />
                    </Form.Item>
                </Col>
            </Row>

            <Row gutter={16}>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            字重
                        </Typography.Text>
                        <Select
                            size="small"
                            value={title.textStyle?.fontWeight || 'normal'}
                            onChange={(value) => handleTextStyleChange('fontWeight', value)}
                            style={{ width: '100%' }}
                        >
                            <Select.Option value="normal">普通</Select.Option>
                            <Select.Option value="bold">粗体</Select.Option>
                            <Select.Option value="bolder">特粗</Select.Option>
                            <Select.Option value="lighter">细体</Select.Option>
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            字体样式
                        </Typography.Text>
                        <Select
                            size="small"
                            value={title.textStyle?.fontStyle || 'normal'}
                            onChange={(value) => handleTextStyleChange('fontStyle', value)}
                            style={{ width: '100%' }}
                        >
                            <Select.Option value="normal">普通</Select.Option>
                            <Select.Option value="italic">斜体</Select.Option>
                        </Select>
                    </Form.Item>
                </Col>
            </Row>

            <Form.Item style={{ marginBottom: 8 }}>
                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                    字体
                </Typography.Text>
                <Input
                    size="small"
                    value={title.textStyle?.fontFamily || ''}
                    onChange={(e) => handleTextStyleChange('fontFamily', e.target.value)}
                    placeholder="sans-serif"
                />
            </Form.Item>
        </div>
    );

    // 定义副标题样式折叠面板项
    const subTitleStylePanel = (
        <div>
            <Row gutter={16}>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            文字颜色
                        </Typography.Text>
                        <ColorPicker
                            value={title.subtextStyle?.color || '#aaaaaa'}
                            onChange={(color) => debouncedSubtextStyleChange('color', color)}
                            showAlpha={true}
                        />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            字号
                        </Typography.Text>
                        <InputNumber
                            size="small"
                            value={title.subtextStyle?.fontSize || 12}
                            onChange={(value) => handleSubtextStyleChange('fontSize', value)}
                            addonAfter="px"
                            style={{ width: '100%' }}
                        />
                    </Form.Item>
                </Col>
            </Row>

            <Row gutter={16}>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            字重
                        </Typography.Text>
                        <Select
                            size="small"
                            value={title.subtextStyle?.fontWeight || 'normal'}
                            onChange={(value) => handleSubtextStyleChange('fontWeight', value)}
                            style={{ width: '100%' }}
                        >
                            <Select.Option value="normal">普通</Select.Option>
                            <Select.Option value="bold">粗体</Select.Option>
                            <Select.Option value="bolder">特粗</Select.Option>
                            <Select.Option value="lighter">细体</Select.Option>
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            字体样式
                        </Typography.Text>
                        <Select
                            size="small"
                            value={title.subtextStyle?.fontStyle || 'normal'}
                            onChange={(value) => handleSubtextStyleChange('fontStyle', value)}
                            style={{ width: '100%' }}
                        >
                            <Select.Option value="normal">普通</Select.Option>
                            <Select.Option value="italic">斜体</Select.Option>
                        </Select>
                    </Form.Item>
                </Col>
            </Row>

            <Form.Item style={{ marginBottom: 8 }}>
                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                    字体
                </Typography.Text>
                <Input
                    size="small"
                    value={title.subtextStyle?.fontFamily || ''}
                    onChange={(e) => handleSubtextStyleChange('fontFamily', e.target.value)}
                    placeholder="sans-serif"
                />
            </Form.Item>
        </div>
    );

    // 定义阴影设置折叠面板项
    const shadowSettingsPanel = (
        <div>
            <Row gutter={16}>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            阴影颜色
                        </Typography.Text>
                        <div>
                            {/* 使用增强的颜色选择器 */}
                            <ColorPicker
                                value={title.shadowColor || 'rgba(0,0,0,0.3)'}
                                onChange={(color) => debouncedHandleChange('shadowColor', color)}
                                showAlpha={true}
                                presetColors={['rgba(0,0,0,0.3)', 'rgba(0,0,0,0.5)', 'rgba(128,128,128,0.3)', 'rgba(70,130,180,0.3)', 'rgba(220,20,60,0.3)']}
                            />
                        </div>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            阴影模糊大小
                        </Typography.Text>
                        <InputNumber
                            size="small"
                            value={title.shadowBlur || 0}
                            onChange={(value) => handleChange('shadowBlur', value)}
                            min={0}
                            max={100}
                            style={{ width: '100%' }}
                        />
                    </Form.Item>
                </Col>
            </Row>

            <Row gutter={16}>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            阴影水平偏移
                        </Typography.Text>
                        <InputNumber
                            size="small"
                            value={title.shadowOffsetX || 0}
                            onChange={(value) => handleChange('shadowOffsetX', value)}
                            style={{ width: '100%' }}
                        />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            阴影垂直偏移
                        </Typography.Text>
                        <InputNumber
                            size="small"
                            value={title.shadowOffsetY || 0}
                            onChange={(value) => handleChange('shadowOffsetY', value)}
                            style={{ width: '100%' }}
                        />
                    </Form.Item>
                </Col>
            </Row>
        </div>
    );

    // 定义文字样式折叠面板items
    const textStyleCollapseItems: CollapseProps['items'] = [
        {
            key: '1',
            label: '主标题样式',
            children: mainTitleStylePanel
        },
        {
            key: '2',
            label: '副标题样式',
            children: subTitleStylePanel
        }
    ];

    // 定义阴影设置折叠面板items
    const shadowCollapseItems: CollapseProps['items'] = [
        {
            key: '1',
            label: '阴影设置',
            children: shadowSettingsPanel
        }
    ];

    // 定义标签页内容
    const tabItems: TabsProps['items'] = [
        {
            key: '1',
            label: '基本',
            children: (
                <>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Input
                            placeholder="主标题"
                            value={title.text || ''}
                            onChange={(e) => handleChange('text', e.target.value)}
                            size="small"
                        />
                    </Form.Item>

                    <Form.Item style={{ marginBottom: 8 }}>
                        <Input
                            placeholder="副标题"
                            value={title.subtext || ''}
                            onChange={(e) => handleChange('subtext', e.target.value)}
                            size="small"
                        />
                    </Form.Item>

                    <Divider style={{ margin: '12px 0' }} />

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    水平位置
                                </Typography.Text>
                                <Select
                                    size="small"
                                    value={title.position?.left || 'center'}
                                    onChange={(value) => debouncedPositionChange('left', value)}
                                    style={{ width: '100%' }}
                                >
                                    <Select.Option value="left">左对齐</Select.Option>
                                    <Select.Option value="center">居中</Select.Option>
                                    <Select.Option value="right">右对齐</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    垂直位置
                                </Typography.Text>
                                <Select
                                    size="small"
                                    value={title.position?.top || 'top'}
                                    onChange={(value) => debouncedPositionChange('top', value)}
                                    style={{ width: '100%' }}
                                >
                                    <Select.Option value="top">顶部</Select.Option>
                                    <Select.Option value="middle">中部</Select.Option>
                                    <Select.Option value="bottom">底部</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    对齐方式
                                </Typography.Text>
                                <Select
                                    size="small"
                                    value={title.textAlign || 'auto'}
                                    onChange={(value) => debouncedHandleChange('textAlign', value)}
                                    style={{ width: '100%' }}
                                >
                                    <Select.Option value="auto">自动</Select.Option>
                                    <Select.Option value="left">左对齐</Select.Option>
                                    <Select.Option value="center">居中</Select.Option>
                                    <Select.Option value="right">右对齐</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    基线对齐
                                </Typography.Text>
                                <Select
                                    size="small"
                                    value={title.textBaseline || 'auto'}
                                    onChange={(value) => debouncedHandleChange('textBaseline', value)}
                                    style={{ width: '100%' }}
                                >
                                    <Select.Option value="auto">自动</Select.Option>
                                    <Select.Option value="top">顶部</Select.Option>
                                    <Select.Option value="middle">中部</Select.Option>
                                    <Select.Option value="bottom">底部</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    标题间距
                                </Typography.Text>
                                <InputNumber
                                    size="small"
                                    value={title.itemGap || 10}
                                    onChange={(value) => handleChange('itemGap', value)}
                                    min={0}
                                    max={100}
                                    style={{ width: '100%' }}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Tooltip title="支持四个方向独立设置内边距">
                                    <Space>
                                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                            内边距
                                        </Typography.Text>
                                        <QuestionCircleOutlined />
                                    </Space>
                                </Tooltip>
                                <PaddingControl
                                    padding={title.padding}
                                    onChange={(value) => handleChange('padding', value)}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                </>
            )
        },
        {
            key: '2',
            label: '文字样式',
            children: (
                <Collapse
                    bordered={false}
                    size="small"
                    items={textStyleCollapseItems}
                />
            )
        },
        {
            key: '3',
            label: '背景样式',
            children: (
                <>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    背景颜色
                                </Typography.Text>
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <Switch
                                        size="small"
                                        checked={title.backgroundColor !== 'transparent' && !!title.backgroundColor}
                                        onChange={(checked) => {
                                            debouncedHandleChange('backgroundColor', checked ? '#ffffff' : 'transparent');
                                        }}
                                        style={{ marginRight: 8 }}
                                    />
                                    <ColorPicker
                                        value={title.backgroundColor === 'transparent' ? '#ffffff' : (title.backgroundColor || '#ffffff')}
                                        onChange={(color) => debouncedHandleChange('backgroundColor', color)}
                                        showAlpha={true}
                                        disabled={title.backgroundColor === 'transparent'}
                                    />
                                </div>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    边框颜色
                                </Typography.Text>
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <Switch
                                        size="small"
                                        checked={title.borderColor !== 'transparent' && !!title.borderColor}
                                        onChange={(checked) => {
                                            debouncedHandleChange('borderColor', checked ? '#000000' : 'transparent');
                                        }}
                                        style={{ marginRight: 8 }}
                                    />
                                    <ColorPicker
                                        value={title.borderColor === 'transparent' ? '#000000' : (title.borderColor || '#000000')}
                                        onChange={(color) => debouncedHandleChange('borderColor', color)}
                                        showAlpha={true}
                                        disabled={title.borderColor === 'transparent'}
                                    />
                                </div>
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    边框宽度
                                </Typography.Text>
                                <InputNumber
                                    size="small"
                                    value={title.borderWidth || 0}
                                    onChange={(value) => handleChange('borderWidth', value)}
                                    min={0}
                                    addonAfter="px"
                                    style={{ width: '100%' }}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    圆角半径
                                </Typography.Text>
                                <InputNumber
                                    size="small"
                                    value={typeof title.borderRadius === 'number' ? title.borderRadius : 0}
                                    onChange={(value) => handleChange('borderRadius', value)}
                                    min={0}
                                    addonAfter="px"
                                    style={{ width: '100%' }}
                                />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Collapse
                        bordered={false}
                        size="small"
                        items={shadowCollapseItems}
                    />
                </>
            )
        },
        {
            key: '4',
            label: '高级',
            children: (
                <>
                    <div style={{ marginBottom: 12 }}>
                        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                            <Tooltip title="查看ECharts官方文档中关于标题的详细说明">
                                <Button
                                    type="link"
                                    size="small"
                                    icon={<LinkOutlined />}
                                    onClick={() => window.open('./docs/option-title.html', '_blank')}
                                >
                                    查看文档
                                </Button>
                            </Tooltip>
                        </div>
                    </div>
                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            主标题超链接
                        </Typography.Text>
                        <Input
                            size="small"
                            value={title.link || ''}
                            onChange={(e) => handleChange('link', e.target.value)}
                            placeholder="https://"
                        />
                    </Form.Item>

                    <Form.Item style={{ marginBottom: 8 }}>
                        <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                            链接打开方式
                        </Typography.Text>
                        <Select
                            size="small"
                            value={title.target || 'blank'}
                            onChange={(value) => handleChange('target', value)}
                            style={{ width: '100%' }}
                        >
                            <Select.Option value="self">当前窗口</Select.Option>
                            <Select.Option value="blank">新窗口</Select.Option>
                        </Select>
                    </Form.Item>

                    <Row gutter={16}>
                        <Col span={8}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    图层 z
                                </Typography.Text>
                                <InputNumber
                                    size="small"
                                    value={title.z || 2}
                                    onChange={(value) => handleChange('z', value)}
                                    style={{ width: '100%' }}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    图层 zlevel
                                </Typography.Text>
                                <InputNumber
                                    size="small"
                                    value={title.zlevel || 0}
                                    onChange={(value) => handleChange('zlevel', value)}
                                    style={{ width: '100%' }}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item style={{ marginBottom: 8 }}>
                                <Typography.Text type="secondary" style={{ marginBottom: 4, display: 'block', fontSize: 12 }}>
                                    触发事件
                                </Typography.Text>
                                <Switch
                                    checked={title.triggerEvent === true}
                                    onChange={(checked) => handleChange('triggerEvent', checked)}
                                    size="small"
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                </>
            )
        }
    ];

    return (
        <div style={{ padding: 12, background: '#fff', borderRadius: 4 }}>
            {/* 标题配置预览 */}
            <div
                style={{
                    marginBottom: 16,
                    padding: 16,
                    border: '1px dashed #d9d9d9',
                    borderRadius: 4,
                    backgroundColor: '#fafafa'
                }}
            >
                <div
                    style={{
                        backgroundColor: title.backgroundColor || 'transparent',
                        borderColor: title.borderColor || 'transparent',
                        borderWidth: title.borderWidth ? `${title.borderWidth}px` : '0',
                        borderStyle: 'solid',
                        borderRadius: typeof title.borderRadius === 'number' ? `${title.borderRadius}px` : '0',
                        padding: Array.isArray(title.padding)
                            ? `${title.padding[0]}px ${title.padding[1]}px ${title.padding[2]}px ${title.padding[3]}px`
                            : (typeof title.padding === 'number' ? `${title.padding}px` : '5px'),
                        textAlign: title.textAlign === 'left' ? 'left' :
                            (title.textAlign === 'right' ? 'right' : 'center'),
                        boxShadow: title.shadowColor ?
                            `${title.shadowOffsetX || 0}px ${title.shadowOffsetY || 0}px ${title.shadowBlur || 0}px ${title.shadowColor}` : 'none',
                        display: title.show === false ? 'none' : 'block'
                    }}
                >
                    {title.text && (
                        <div
                            style={{
                                color: title.textStyle?.color || '#333',
                                fontSize: `${title.textStyle?.fontSize || 18}px`,
                                fontWeight: title.textStyle?.fontWeight || 'normal',
                                fontStyle: title.textStyle?.fontStyle || 'normal',
                                fontFamily: title.textStyle?.fontFamily || 'sans-serif',
                                lineHeight: '1.5',
                                marginBottom: title.subtext ? `${title.itemGap || 10}px` : '0'
                            }}
                        >
                            {title.text}
                        </div>
                    )}

                    {title.subtext && (
                        <div
                            style={{
                                color: title.subtextStyle?.color || '#aaa',
                                fontSize: `${title.subtextStyle?.fontSize || 12}px`,
                                fontWeight: title.subtextStyle?.fontWeight || 'normal',
                                fontStyle: title.subtextStyle?.fontStyle || 'normal',
                                fontFamily: title.subtextStyle?.fontFamily || 'sans-serif',
                                lineHeight: '1.5'
                            }}
                        >
                            {title.subtext}
                        </div>
                    )}
                </div>

                <Divider style={{ margin: '16px 0 12px' }} />

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Form.Item
                        label="显示标题"
                        valuePropName="checked"
                        style={{ marginBottom: 0 }}
                    >
                        <Switch
                            checked={title.show !== false}
                            onChange={(checked) => handleChange('show', checked)}
                            size="small"
                        />
                    </Form.Item>

                    <Space>
                        <Tooltip title="导出当前配置">
                            <Button
                                size="small"
                                icon={<ExportOutlined />}
                                onClick={() => {
                                    try {
                                        const configJson = JSON.stringify(title, null, 2);
                                        navigator.clipboard.writeText(configJson);
                                        message.success('标题配置已复制到剪贴板');
                                    } catch (e) {
                                        console.error('导出配置失败', e);
                                        message.error('导出配置失败');
                                    }
                                }}
                            >
                                导出
                            </Button>
                        </Tooltip>

                        <Popover
                            content={presetsContent}
                            title={null}
                            trigger="click"
                            placement="bottomRight"
                        >
                            <Button
                                size="small"
                                type="primary"
                                icon={<ImportOutlined />}
                            >
                                应用预设
                            </Button>
                        </Popover>
                    </Space>
                </div>
            </div>

            {title.show !== false && (
                <div style={{ marginTop: 8 }}>
                    <Tabs
                        activeKey={activeTab}
                        onChange={setActiveTab}
                        size="small"
                        items={tabItems}
                    />
                </div>
            )}

            {/* 保存预设模态对话框 */}
            <Modal
                title="保存为预设样式"
                open={showPresetModal}
                onOk={handleSavePreset}
                onCancel={() => setShowPresetModal(false)}
                okText="保存"
                cancelText="取消"
            >
                <div style={{ marginBottom: 16 }}>
                    <Typography.Paragraph>
                        将当前标题配置保存为预设，方便下次快速应用。
                    </Typography.Paragraph>
                </div>
                <Form.Item label="预设名称" required>
                    <Input
                        placeholder="请输入预设名称"
                        value={presetName}
                        onChange={(e) => setPresetName(e.target.value)}
                        autoFocus
                    />
                </Form.Item>
            </Modal>
        </div>
    );
};

export default TitleConfig;
